<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品详情页</title>
    <script src="../js/adapt.js"></script>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../node_modules/mint-ui/lib/style.css">
    <link rel="stylesheet" href="../css/product_detail.css">
    <!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_694915_0zjez76evbvb1emi.css"> -->
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <header>
            <a href="javascript:history.back(-1);" class="arrow_left"></a>
            <div class="header_tab">
                <a class="tab-item" href="./product_detail.html">商品</a>
                <a class="tab-item active" href="./product_detail_content.html">详情</a>
                <a class="tab-item" href="./product_detail_comment.html">评价</a>
            </div>
        </header>
        <div class="content">
            <div class="product_detail">
                <img v-for="item in goods_gallery" :src="item.image_path" alt="">
            </div>
            <div class="cart">
                <div class="cart_left">
                    <div class="cart_group">
                        <a href="javascript:;">
                            <div class="message">
                                <div class="message"></div>
                                <p>私聊</p>
                            </div>
                        </a>
                        <a href="javascript:;">
                            <div class="shop">
                                <div class="store"></div>
                                <p>店铺</p>
                            </div>
                        </a>
                        <a href="./shop_cart.html">
                            <div class="cart2">
                                <div class="shop_cart1"></div>
                                <p>购物车</p>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="cart_right" @click="cart_show = !cart_show">
                    <a href="javascript:;">加入购物车</a>
                </div>
            </div>
        </div>
        <div class="shop_cart" v-if="cart_show">
            <div class="shop_cart_top clearfix">
                <img src="../images/avatar.png" alt="" class="avatar">
                <div class="shop_cart_right">
                    <p>{{goods_info.goods_name}}</p>
                    <p>￥ {{goods_info.shop_price}}</p>
                    <del>￥ {{goods_info.market_price}}</del>
                    <span style="float: right;">库存:{{goods_info.storage}}</span>
                </div>
                <i class="close_cart" @click="cart_show=!cart_show"></i>
            </div>
            <div class="shop_cart_format">
                <p>{{format_name}}</p>
                <div class="button_group">
                    <button v-for="(item,index) in format" :class="{active:item.isActived}" @click="changeActive(item,index)">{{item.item}}</button>
                </div>
            </div>
            <div class="shop_cart_sum">
                <p>数量</p>
                <div class="num_button_group">
                    <button class="reduce" :class="{active:reduceActive&&!addActive}" @click="reduce">-</button>
                    <p>{{num}}</p>
                    <button class="add" :class="{active:addActive&&!reduceActive}" @click="add">+</button>
                </div>
            </div>
            <mt-button class="sure" @click.native="goform">确定</mt-button>
        </div>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../node_modules/mint-ui/lib/index.js"></script>
    <script src="../js/adapt.js"></script>
    <script src="../js/global.js"></script>
    <script>
        $(function () {
            $('.header_tab>a').click(function (e) {
                $(this).addClass('active').siblings().removeClass('active');
            });
        })
        let vm = new Vue({
            el: "#app",
            created() {
                var goods_info = '';
                var shop_comment = '';
                var goods_gallery = '';
                var format = '';
                var goods_id = GetQueryString('goods_id');
                /* 获取商品信息 */
                $.ajax({
                    url: BaseUrl + '/index.php/Api/GoodsApi/goodsDetail',
                    dataType: 'json',
                    type: 'post',
                    async: false,
                    data: {
                        'goods_id': goods_id
                    },
                    success(data) {
                        console.log(data);
                        goods_info = data.data.goods_info;
                        shop_comment = data.data.shop_comment;
                        goods_gallery = data.data.goods_gallery;
                        // format = data.data.goods_spec;
                    },
                    error(err) {
                        console.log(err);
                    }
                })
                // 获取规格
                $.ajax({
                    url: BaseUrl + '/index.php/Api/GoodsApi/goodsSpec',
                    dataType: 'json',
                    type: 'post',
                    async: false,
                    data: {
                        'goods_id': goods_id
                    },
                    success(data) {
                        // console.log(data);
                        format_name = data.data[0].item_name
                        format = data.data['0'].item_list;
                        format.forEach(item => {
                            item.isActived = false;
                            // Object.assign({},item,{isActived:false});
                        })
                        // console.log(format);
                    },
                    error(err) {
                        console.log(err);
                    }
                })
                this.goods_info = goods_info;
                this.shop_comment = shop_comment;
                this.shop_comment.head_pic = BaseUrl + shop_comment.newComment[0].head_pic;
                this.goods_gallery = goods_gallery;
                this.format = format;
                this.format_name = format_name;
                // this.format = Object.assign({},this.format,{})
                // Vue.set(this.format,'isActived',false);
                // console.log(this.format);
            },
            data: {
                follow: true,
                shop_comment: '',
                buy_limit: '',
                /* format: [
                    { name: '规格1', isActived: false },
                    { name: '规格2', isActived: true }
                ], */
                format: '',
                cart_show: false,
                num: 1,
                reduceActive: false,
                addActive: false,
                goods_info: '',
                goods_gallery: '',
                format_name: ''
                // format:''
            },
            methods: {
                changeActive(item, index) {
                    var token = GetQueryString('token');
                    var goods_id = GetQueryString('goods_id');
                    this.format.forEach((item1, index) => {
                        if (item1 == item) {
                            // console.log(item);
                            item1.isActived = true;
                            $.ajax({
                                url: BaseUrl + '/index.php/Api/GoodsApi/getGoodsSpecPrice',
                                type: 'post',
                                dataType: 'json',
                                data: {
                                    'goods_id': goods_id,
                                    'spec_key': item1.item_id,
                                    'token': token
                                },
                                success(data) {
                                    // console.log(data);
                                    // console.log(that);
                                    vm.goods_info.shop_price = data.data.price;
                                    vm.goods_info.storage = data.data.store_count;
                                },
                                error(err) {
                                    console.log(err);
                                }

                            })
                        } else {
                            item1.isActived = false;
                        }
                    })
                    // Vue.set(this.format, index, { name: '规格' + Number(index + 1), isActived: true });
                },
                add() {
                    if (this.num == 20) {
                        this.addActive = true;
                        return;
                    } else {
                        this.reduceActive = false;
                        this.num++;
                    }
                },
                reduce() {
                    if (this.num == 1) {
                        this.reduceActive = true;
                        return;
                    } else {
                        this.addActive = false;
                        this.num--;
                    }
                },
                goform() {
                    var a = '';
                    var token = GetQueryString('token');
                    var goods_id = GetQueryString('goods_id');
                    a = this.format.every(item => {
                        return item.isActived == false;
                    });

                    if (a) {
                        console.log(this);
                        this.$toast({
                            message: '请至少选择一种规格',
                            position: 'bottom',
                            duration: 1000
                        });
                        // alert(123);
                    } else {
                        var spec_key = '';
                        this.format.forEach(item => {
                            if (item.isActived) {
                                spec_key = item.item_id;
                            }
                        })
                        ajax1 = $.ajax({
                            url: BaseUrl + '/index.php/Api/CartApi/addCart',
                            type: 'post',
                            dataType: 'json',
                            data: {
                                token: token,
                                goods_id: goods_id,
                                spec_key: spec_key,
                                buy_number: vm.num
                            },
                            success(data) {
                                console.log(data);
                                vm.$toast({
                                    message: data.info,
                                    position: 'bottom',
                                    duration: 1000
                                })
                            },
                            error(err) {
                                console.log(err);
                            }
                        })
                        $.when(ajax1).done(function () {
                            window.location.href = './shop_cart.html';
                        })
                        this.cart_show = !this.cart_show;
                    }
                }
            }
        })
    </script>
</body>

</html>